<template>
	<ScorllRefresher @refresh="refresh" @tolower="tolower">
		<view v-for="item of list" :key="item.lawFirmId" class="lawyer-item" @click.stop="tapToDetail(item)">
			<view class="lawyer-item__icon">
				<image mode="aspectFill" :src="item.lawFirmLogo"></image>
				<view class="online"></view>
			</view>
			<view class="lawyer-item__info">
				<view class="follow" :class="{'follow--highlight':!(isLogin() && item.follow == '1')}"
					@click.stop="tapFollow(item)">
					{{isLogin() && item.follow == '1' ?'取消':'关注'  }}
				</view>
				<view class="lawyer-item__info__main" style="width:360rpx;">{{item.lawFirmName}}</view>
				<template v-if="item.lawFirmType == 1">
					<view class="lawyer-item__info__desc">
						{{item.certification == 1 ? '执业认证':'未认证'}}<text>|</text>执业{{item.years}}年
					</view>
					<!-- 律师 -->
					<view class="lawyer-item__info__advantage">
						<view class="advantage-tag">擅长</view>
						<view class="advantage-list">
							<view class="ellipsis">{{item.special}}</view>
						</view>
					</view>
				</template>
				<!-- 律所 -->
				<view v-else class="lawyer-item__info__advantage">
					<view class="advantage-tag">简介</view>
					<view class="advantage-list">
						<view class="ellipsis">{{item.lawFirmDesc}}</view>
					</view>
				</view>
			</view>
		</view>
	</ScorllRefresher>
</template>
<script lang="ts">
	import { defineComponent } from "vue";
	export default defineComponent({
		// #ifdef MP-WEIXIN
		options: {
			virtualHost: true,
			// styleIsolation: 'shared'
		},
		// #endif
	})
</script>
<script setup lang="ts">
	import ScorllRefresher from '@/components/scroll-refresher/scroll-refresher.vue';
	import { ServiceType } from '@/utils/constant';
	import { isEmpty } from '@/utils/util';
	import { isLogin } from '@/utils/auth';
	import { getLawfirmList } from '@/apis/lawfirm';
	import { useGetDataPaging } from '@/hooks/paging';
	import { ref, watchEffect, computed, defineExpose } from 'vue';
	import type { AnyObj } from '@/types/global';
	import { saveUnfollow, saveFollow } from '@/apis/auth';
	import { useAuthStore } from '@/stores';

	const authStore = useAuthStore();
	const props = withDefaults(defineProps<{
		keyword : string;
		lawFirmType : 1 | 2; // 1 律师；2：律所
	}>(), {
		keyword: '',
		lawFirmType: 1
	});


	const { list, refresh, tolower } = useGetDataPaging({
		api: getLawfirmList,
		params: () => {
			return {
				lawFirmName: props.keyword,
				lawFirmType: props.lawFirmType
			}
		}
	});

	function tapToDetail(item : { lawFirmType : '1' | '2'; lawFirmId : string }) {
		if (item.lawFirmType === '1') {
			uni.navigateTo({
				url: `/pages-lawyer/lawyer-detail/lawyer-detail?lawFirmId=${item.lawFirmId}`
			})
			return;
		}
		uni.navigateTo({
			url: `/pages-lawyer/law-detail/law-detail?lawFirmId=${item.lawFirmId}`
		})
	}

	function tapFollow(item : AnyObj) {
		if (!isLogin()) {
			authStore.show();
			return;
		}
		if (item.follow == '1') {
			saveUnfollow(item.lawFirmId).then((res) => {
				if (res.code !== 200) {
					uni.showToast({
						icon: 'none',
						title: res.msg ?? '服务器忙，请稍后再试'
					});
					return;
				}
				item.follow = "0";
				uni.showToast({
					icon: 'none',
					title: '已取消'
				});
			});
			return;
		}

		saveFollow(item.lawFirmId).then((res) => {
			if (res.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: res.msg ?? '服务器忙，请稍后再试'
				});
				return;
			}
			item.follow = "1";
			uni.showToast({
				icon: 'none',
				title: '已关注'
			});
		});
	}

	watchEffect(() => {
		console.log(props.keyword);
		refresh();
	})

	defineExpose({
		search: refresh
	})
</script>

<style lang="scss" scoped>

</style>